<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <!-- 使用引入封装好的组件  大驼峰命名和横线分隔都可以 -->
        <TreeTools :tree-node="company" :is-root="true" />
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <!-- 在树形图里面可以写入内容，多少个节点将会循环多少次 -->
          <!-- element ui里面要使用作用域插槽，里面的信息才能使用tree中的数据，slot-scope=“obj”  接收传递给插槽的数据，data是每个节点的数据对象 -->
          <!-- 监听子子组件传递的消息 -->
          <tree-tools
            slot-scope="{data}"
            :tree-node="data"
            @dealDepts="getDepartments"
            @addDepts="addDepts"
            @editDepts="editDepts"
          />
        </el-tree>
      </el-card>
    </div>
    <add-dept ref="addDept" :show-dialog.sync="showDialog" :tree-node="node" @addDepts="getDepartments" />
    <!--  @changeDialog="test" 不适用自定义事件的方式来，使用事件修饰符sync -->
    <!-- 刚实现的是组件子父通信，子给父$emit一个事件，父执行@该事件，并定义方法来 -->
  </div>
</template>
<script>
import TreeTools from './components/tree-tools.vue'
import { getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'
import AddDept from '@/views/departments/components/add-dept.vue'
import { getEmployeeSimple } from '@/api/employees'
export default {
  components: {
    // 注册组件，同名省略写法
    TreeTools,
    AddDept
  },
  data() {
    return {
      defaultProps: {
        label: 'name'
      },
      showDialog: false, // 默认不显示弹层
      departs: [],
      // 使用方法中传递的数据，不要把数据写死了
      // [
      //   {
      //     name: '总裁办',
      //     manager: '曹操',
      //     children: [{ name: '董事会', manager: '曹丕' }]
      //   },
      //   { name: '行政部', manager: '刘备' },
      //   { name: '人事部', manager: '孙权' }
      // ]
      company: { name: '', manager: '' },
      node: null // "记录当前node节点"
    }
  },
  // 在这没有直接使用api请求方法而是再封装了，为了频繁使用方便
  created() {
    this.getDepartments() // 调用自身的方法
  },
  methods: {
    // 重新获取数据的方法
    async getDepartments() {
      const result = await getDepartments()
      this.company = { name: result.companyName, manager: '负责人', id: '' }
      // 这样直接写没有数据结构了，需要将其转化为树状结构
      this.departs = tranListToTreeData(result.depts, '')
      console.log(result, 888)
    },
    addDepts(node) {
      this.showDialog = true // 显示弹层
      // node数据是当前点击的部门，给当前部门记录下来
      this.node = node
    },
    async getEmployeeSimple() {
      this.peoples = await getEmployeeSimple()
    },
    test(value) {
      this.showDialog = value
    },
    // 编辑节点方法，弹窗弹框
    editDepts(node) {
      this.showDialog = true
      this.node = node
      // console.log(this.$refs.addDept, 6666)
      this.$refs.addDept.getDepartDetail(node.id)
    }
  },
  peoples: [] // 接收获取的员工简单列表的数据
}
</script>

<style>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
